<!-- 关联信息 -->
<template>
  <div class="relation-wrap">
    <el-table
      :data="tableList"
      :cell-style="{ color: '#333333' }"
      :header-cell-style="{ background: '#F3F4F7', color: '#000000' }"
    >
      <el-table-column
        type="index"
        label="序号"
        width="60"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="affectedTable"
        label="名称"
        min-width="150"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="affectedField"
        label="字段"
        min-width="150"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <template>
            {{ scope.row.affectedField || "---" }}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="originalTable"
        label="关联表"
        min-width="150"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="originalField"
        label="关联字段"
        min-width="150"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <template>
            {{ scope.row.originalField || "---" }}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="rule"
        label="更新规则"
        min-width="150"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <template>
            {{ scope.row.rule || "---" }}
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "TableRelation",
  props: {
    tableList: {
      type: Array,
      default: () => [],
    },
  },
};
</script>
<style lang="scss" scoped>
.relation-wrap {
  height: 100%;
  overflow-y: auto;
}
</style>
